<template>
  <div>
    <diaog :showDialog="showDialog" @update:showDialog="handleValueChange">
      <template #title>
        <img class="mr-6" src="@/assets/img/icon/home/icon-income.svg" alt="" />
        {{ diaLogTitle }}
      </template>
      <template #content>
        <div class="content-box">
          <div class="content-header flex flex-jus">
            <div class="header-left flex flex-align-center">
              <p class="day mr-6 fz-60 c-active">
                {{ $day(time).get('date') }}
              </p>
              <div class="day-info c9 fz-20">
                <p class="mb-3">
                  {{
                    ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][
                      $day(time).day()
                    ]
                  }}
                </p>
                <p>
                  {{ $day(time).get('month') + 1 }}/{{ $day(time).get('year') }}
                </p>
              </div>
            </div>
            <p>
              <!-- {{ list.length }} -->
              <span style="color: #666; font-size: 14px"
                >处方已付款<em style="font-size: 22px">{{ list.length }}</em
                >人</span
              >
              <span class="price-box">合计：￥{{ income }}</span>
            </p>
          </div>
          <div style="height: 13px; background: #f9f9f9"></div>
          <div v-for="item in list" :key="item">
            <currentItem :info="item" style="padding: 0 20px">
              <template #operation="scoped"
                ><p class="price-box">合计：{{ scoped.data.num }}</p></template
              >
            </currentItem>
          </div>
        </div>
      </template>
    </diaog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { GetAppointmentUserList } from '@/service/api/doctor'
import diaog from '@/components/diaog.vue'
import currentItem from './currentItem.vue'
export default defineComponent({
  name: 'h-dialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    values: {
      type: Number
    },
    diaLogTitle: {
      type: String
    },
    incomeData: {
      type: Object,
      default: () => ({
        total_income: 0.0,
        today_income: 0.0,
        week_income: 0.0,
        month_income: 0.0
      })
    }
  },
  components: {
    diaog,
    currentItem
  },
  emits: ['update:showDialog'],
  setup(props, { emit }) {
    let page = ref(1)
    let limit = ref(3)
    let time = ref(new Date())
    const list = ref([])
    /**
     * 收入
     */
    const income = computed(() => {
      let price = 0
      switch (props.values) {
        case 1:
          price = props.incomeData.total_income
          break
        case 2:
          price = props.incomeData.today_income
          break
        case 3:
          price = props.incomeData.week_income
          break
        case 4:
          price = props.incomeData.month_income
          break
        default:
          break
      }
      return price
    })
    watch(
      () => props.showDialog,
      (newvalue) => {
        if (newvalue) {
          ajaxGetAppointmentUserList()
        }
      }
    )
    /**
     * 关闭弹窗
     */
    const handleValueChange = (flag: boolean) => {
      emit('update:showDialog', flag)
    }
    /**
     * 获取用户预约列表
     */
    const ajaxGetAppointmentUserList = () => {
      let posData = {
        page: page.value,
        limit: limit.value,
        time: props.values,
        is_prescription: true,
        is_pay: 2
      }
      console.log('posData', posData)

      GetAppointmentUserList(posData).then((res) => {
        if (res.code == 200) {
          console.log('props', res)

          list.value = res.data.list
        }
      })
    }
    return {
      handleValueChange,
      list,
      income,
      time
    }
  }
})
</script>
<style lange="less">
.content-header {
  padding-left: 30px;
  padding-bottom: 20px;
}
.price-box {
  color: #ff0000;
  font-size: 26px;
  margin-right: 26px;
  float: right;
}
</style>
